<template>
   <div class="city">
     <city-header :title ="'城市选择'"></city-header>
     <city-list :cities ="cities" :hotCities ="hotCities"></city-list>
   </div>
</template>

<script>
import CityHeader from './components/Header';
import CityList from './components/CityList';
import axios from 'axios'

export default {
  name: 'City',
  components: {
    'city-header': CityHeader,
    'city-list': CityList
  },
  data(){
    return {
      cities: {},
      hotCities: []
    }
  },
  methods:{
    getCityInfo: function(){
      axios.get('/city.json?city=' + this.$store.state.city)
        .then( res => {
          if(res.data.ret === "true" && res.data.data){
            let data = res.data.data;
            this.cities = data.cities;
            this.hotCities = data.hotCities;
          }
        })
    }
  },
  mounted: function(){
    this.getCityInfo();
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';

.city {

}

</style>